// 1. @use 用来导入其他 Sass 样式表中的 mixins、函数和变量，并将来自多个样式表的 CSS 组合在一起
// 2. 要访问通过 @use 导入的成员（mixins、函数和变量），可以使用如下语法：<namespace.mixin>、<namespace.function>、<namespace.variable>
// 3. 默认情况下，namespace（命名空间）是模块 URL的最后一部分，如：@use 'foundation/code' -> namespace: code
// 4. namespace 可以通过 as 来指定，如: @use 'foundation/code' as c -> namespace: c;  @use 'foundation/code' as * -> namespace: 
// 5. 私有成员：如果不想样式表的成员被外部访问，则成员可以通过-或_开头。如 'mixins/corners' 中的 $-bl-radius 
// 6. 成员变量是可以配置的。定义变量：variable: value !default。 使用：@use 'style' with {variable: value}。 如：@use 'mixins/library' with ($black: #333)

@use 'foundation/code';
@use 'foundation/lists';
@use 'mixins/corners'; // 默认导入：namespace=corners
@use 'mixins/standard' as s; // 默认导入：namespace=s
@use 'mixins/library' with ( $black: #333, $color: red );

.button {
  height: corners.$radius * 2;
  @include corners.rounded;

  // 错误！$-bl-radius 私有成员无法在外部访问
  // border-bottom-right-radius: corners.$-bl-radius;
}

.border-width {
  @include s.bordered;
}


.text {
  background-color: library.$black;
  color: library.$color;
}


/*
  与 @import 的区别：
  1. @use 仅在当前样式表中可用，而 @import 会将导入的样式表中的 CSS 组合在一起，这可能导致 CSS 代码重复
  2. @use 只会加载每个文件一次。
  3. @use 必须出现在文件开头，且不能嵌套在样式规则中。嵌套导入可以迁移到混合调用或 meta.load-css()
  4. 每个规则 @use 只能有一个 URL
  5. 即使使用缩进语法，@use 也需要在其 URL 周围加引号
*/